<template>
    <div>
      <city-header></city-header>
      <city-search :cities="cities"></city-search>
      <city-list
        :hotCity="hotCity"
        :cities="cities"
        :letter="letter"
      ></city-list>
      <city-aside :Aside="cities" @change="cityCickChange"></city-aside>
    </div>
</template>

<script>
  import CityHeader from '@/pages/city/components/Header'
  import CitySearch from '@/pages/city/components/Search'
  import CityList from '@/pages/city/components/List'
  import CityAside from '@/pages/city/components/Aside'
  import axios from 'axios'
  export default {
        name: "City",
      components:{//
          CityHeader,
          CitySearch,
          CityList,
          CityAside
      },
    data(){
          return{
            hotCity:[],
            cities:{},
            letter:''
          }
    },
    methods:{
         getCityInfo(){
           axios.get('/static/moke/city.json').then(this.getSucc)
         },
      getSucc(res){
          res=res.data
        if(res.ret && res.data){
          const data=res.data
          this.hotCity=data.hotCities//热门城市
          this.cities=data.cities
        }
      },
    cityCickChange(e){
        this.letter=e;
    }
    },
    mounted(){
      this.getCityInfo()
    }
    }
</script>

<style scoped>

</style>
